<template>
  <div class="box">
    <el-card>
      <el-row>
        <el-col :span="24" class="btn-create">
          <el-button type="primary">保存</el-button>
          <el-button type="primary" @click="ClickSubmit">提交</el-button>
        </el-col>
        <el-form ref="form" :model="form" label-width="80px">
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-input v-model="form.data"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="截至时间">
              <el-date-picker style="width: 100%" v-model="form.olddata" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="汇报频次">
              <el-select v-model="form.region" placeholder="请选择汇报频次" style="width: 100%">
                <el-option label="月" value="月"></el-option>
                <el-option label="年" value="年"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务标题">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="任务内容">
              <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 10 }" v-model="form.desc"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="24" class="btn-Add">
          <el-button type="primary" @click="oldAdd">添加</el-button>
        </el-col>
        <el-table :data="tableData" style="width: 100%" height="250">
          <el-table-column prop="dept" label="责任部门" min-width="300">
            <template slot-scope="scope">
              <el-input v-model="scope.row.dept"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="责任人" min-width="180">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'TaskIssued',
  data() {
    return {
      form: {
        name: '张XX',
        data: '2025-05-01',
        olddata: '2025-12-31',
        region: '月',
        title: '关于25年度XXXXXX',
        desc: '请各部门说明XXXX进展情况'
      },
      tableData: [
        {
          dept: '部门1',
          name: '赵XX'
        },
        {
          dept: '部门2',
          name: '钱XX'
        },
        {
          dept: '部门3',
          name: '孙XX'
        },
        {
          dept: '部门4',
          name: '李X'
        }
      ]
    }
  },
  methods: {
    oldAdd() {
      this.tableData.push({})
    },
    ClickSubmit() {
      this.$router.push('/Approval/Approval')
    }
  }
}
</script>

<style scoped>
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> input {
  background-color: transparent;
}
.box >>> textarea {
  background-color: transparent;
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}
.btn-create {
  padding-bottom: 20px;
}
.btn-Add {
  padding-bottom: 20px;
}
</style>
